<script setup>
import {computed, onMounted, ref} from "vue";
import searchList from '/components/search-list.vue'
import {getTagListApi} from "@/api/tag.js";
import {useStudentStroes} from "@/stores/modules/studentStroes.js";

const studentStore = useStudentStroes()
const tagItems = [
  {
    id: 1,
    name: '社交'
  },
  {
    id: 2,
    name: '外貌'
  },
  {
    id: 3,
    name: '运动'
  },
  {
    id: 4,
    name: '活动'
  }
]
const tagIndex = ref(1)
const toggleIndex = (e) => {
  tagIndex.value = e.id
}
const tagList = ref([])
const currTagList = computed(() => tagList.value.filter(item => item.parentId === tagIndex.value))

const getTagList = async () => {
  const res = await getTagListApi()
  tagList.value = res.data
}

const searchVal = ref('')
const resList = ref([])
const search = (e) => {
  searchVal.value = e
  resList.value = tagList.value.filter(item => item.name.includes(searchVal.value))
}

const selectTagList = ref([])
const select = (e) => {
  if (selectTagList.value.some(item => item.id === e.id)) {
    selectTagList.value.splice(selectTagList.value.indexOf(e), 1)
  } else {
    selectTagList.value.push(e)
  }
  searchVal.value = ''
}
const submit = () => {
  studentStore.setTagList(selectTagList.value)
  uni.switchTab({
    url: '/pages/index/index'
  })
}
const init = () => {
  selectTagList.value = studentStore.tagList
}
onMounted(() => {
  getTagList()
  init()
})
</script>

<template>
  <up-input
      custom-style="background:#fff;"
      fontSize="32rpx"
      placeholder="请输入标签名称关键词搜索添加"
      prefix-icon="search"
      prefix-icon-style="font-size:40rpx;"
      shape="circle"
      @change="search"></up-input>
  <up-text :suffix-icon="`(${selectTagList.length})`" bold margin="20rpx 0" size="25rpx"
           text="已选择标签&nbsp;"></up-text>
  <up-text color="#0000006E" icon-style="font-size:24rpx;color:#0000006E;"
           prefix-icon="error-circle"
           size="24rpx" text="&nbsp;&nbsp;学工部分类管理标签；自动去重"></up-text>
  <scroll-view v-if="searchVal.length===0" class="tag">
    <view class="tag-nav">
      <up-tabs
          :activeStyle="{
             color:'#2E6BF8FF',
               fontWeight: '500',
               fontSize: '32rpx',
             }"
          :inactiveStyle="{
                color:'#000000FF',
                 fontSize: '32rpx'
             }"
          :list="tagItems"
          itemStyle="margin:20rpx 0;padding-left: 25px; padding-right: 25px; height: 20px;border-radius: 17rpx"
          line-height="5"
          lineColor="#2E6BF8FF"
          @click="toggleIndex"
      ></up-tabs>
    </view>
    <view class="tag-list">
      <view v-for="item in currTagList" :key="item.id"
            :style="(selectTagList.some(i=>i.id===item.id)) ? `background:#8798C0FF;color:#fff;` : ''"
            class="tag-item" @click="select(item)">
        <span class="title">{{ item.name }}</span>
      </view>
    </view>
    <view class="btn">
      <up-button custom-style="background:#2E6BF8FF;" shape="circle" text="提交" type="primary"
                 @click="submit"></up-button>
    </view>
  </scroll-view>
  <search-list v-else :res-list="resList" @select="select"></search-list>
</template>

<style lang="scss" scoped>
.tag {
  position: relative;
  height: 70vh;

  .tag-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 100rpx;

    .tag-item {
      margin: 30rpx 10rpx;
      width: 200rpx;
      height: 72rpx;
      background: #FFFFFF;
      border: 2rpx solid #DAE5FF;
      border-radius: 36rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .btn {
    position: absolute;
    bottom: 30rpx;
    width: 95%;
  }
}
</style>